// pages/area/singapore/singaporeRequest.js
import evn from '../../../utils/http/evn'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgBaseUrl: evn.dev.imgUrl,
    windowHeight: 0,
    current: 1, // 1: 第一屏，2: 第二屏
    screen1Y: 0,
    screen2Y: 0, // 初始化后设为窗口高度
    screen1Z: 2,
    screen2Z: 3,
    animating: false,
    screen1Style: '',
    screen2Style: '',
    startY: 0,
    scrollTop: 0, // 记录scroll-view的滚动位置
    overlayOpacity1: 0, // 第一屏蒙层透明度
    overlayOpacity2: 0  // 第二屏蒙层透明度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取窗口高度
    const info = wx.getSystemInfoSync();
    const h = info.windowHeight;
    this.setData({
      windowHeight: h,
      screen1Y: 0,
      screen2Y: h
    }, () => {
      this.updateStyles();
    });
  },
  
  // 更新样式
  updateStyles() {
    const s1 = `transform: translateY(${this.data.screen1Y}px); z-index: ${this.data.screen1Z}; transition: ${this.data.animating ? 'transform 400ms ease' : 'none'};`;
    const s2 = `transform: translateY(${this.data.screen2Y}px); z-index: ${this.data.screen2Z}; transition: ${this.data.animating ? 'transform 400ms ease' : 'none'};`;
    this.setData({
      screen1Style: s1,
      screen2Style: s2
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  
  // 触摸开始事件
  onTouchStart(e) {
    const startY = (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY) || 
                  (e.touches && e.touches[0] && e.touches[0].clientY) || 0;
    this.setData({
      startY,
      animating: false
    }, () => this.updateStyles());
  },
  
  // 触摸移动事件
  onTouchMove(e) {
    // 如果当前是第二屏，且不是从顶部下拉，则不处理触摸事件
    // 让scroll-view自己处理滚动
    if (this.data.current === 2) {
      // 只有当滚动到顶部且是下拉手势时才处理
      if (this.data.scrollTop > 0) {
        return;
      }
      
      const moveY = (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY) || 
                   (e.touches && e.touches[0] && e.touches[0].clientY) || 0;
      const delta = moveY - this.data.startY;
      
      // 降低触发阈值，使下拉更容易触发切换
      if (delta <= 10) {
        return;
      }
    }
    
    const moveY = (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY) || 
                 (e.touches && e.touches[0] && e.touches[0].clientY) || 0;
    const delta = moveY - this.data.startY;
    const h = this.data.windowHeight;
    
    if (this.data.current === 1 && delta < 0) {
      // 第一屏向上滑动，显示第二屏
      const s2Y = Math.max(0, h + delta);
      
      // 使用固定透明度0.5，不随滑动距离变化
      // 只有当滑动开始时才显示蒙层
      const showOverlay = delta < -20; // 只有滑动超过一定距离才显示蒙层
      
      this.setData({
        screen2Z: 3,
        screen1Z: 2,
        screen2Y: s2Y,
        screen1Y: 0,
        overlayOpacity1: showOverlay ? 0.5 : 0, // 设置第一屏固定蒙层透明度
        overlayOpacity2: 0 // 确保第二屏蒙层不显示
      }, () => this.updateStyles());
    } else if (this.data.current === 2 && delta > 0 && this.data.scrollTop <= 0) {
      // 第二屏向下滑动，且已经滚动到顶部，显示第一屏
      const s1Y = Math.min(0, -h + delta);
      
      // 使用固定透明度0.5，不随滑动距离变化
      // 只有当滑动开始时才显示蒙层
      const showOverlay = delta > 10; // 降低蒙层显示阈值，与触发阈值保持一致
      
      this.setData({
        screen1Z: 3,
        screen2Z: 2,
        screen1Y: s1Y,
        screen2Y: 0,
        overlayOpacity1: 0, // 确保第一屏蒙层不显示
        overlayOpacity2: showOverlay ? 0.5 : 0 // 设置第二屏固定蒙层透明度
      }, () => this.updateStyles());
    }
  },
  
  // 触摸结束事件
  onTouchEnd(e) {
    // 如果当前是第二屏，且不是从顶部下拉，则不处理触摸事件
    if (this.data.current === 2) {
      // 只有当滚动到顶部且是下拉手势时才处理
      if (this.data.scrollTop > 0) {
        return;
      }
      
      const endY = (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY) || 0;
      const delta = endY - this.data.startY;
      
      // 如果不是明显的下拉手势，也不处理
      if (delta <= 20) {
        return;
      }
    }
    
    const endY = (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY) || 0;
    const delta = endY - this.data.startY;
    const h = this.data.windowHeight;
    const threshold = h * 0.25;
    
    if (this.data.current === 1 && delta < 0) {
      if (Math.abs(delta) > threshold) {
        // 完成进入第二屏（第二屏从底部覆盖）
        this.setData({
          animating: true,
          screen2Z: 3,
          screen1Z: 2,
          screen2Y: 0,
          screen1Y: 0,
          overlayOpacity1: 0.5 // 设置第一屏固定蒙层透明度
        }, () => {
          this.updateStyles();
          setTimeout(() => {
            // 切换到第二屏，并将第一屏准备到顶部外（用于往下覆盖）
            this.setData({
              current: 2,
              animating: false,
              screen1Y: -h,
              screen2Y: 0,
              screen1Z: 2,
              screen2Z: 3,
              overlayOpacity1: 0 // 动画结束后隐藏第一屏蒙层
            }, () => this.updateStyles());
          }, 320);
        });
      } else {
        // 回退到第一屏（第二屏退回到底部）
        this.setData({
          animating: true,
          screen2Y: h,
          screen2Z: 3,
          screen1Z: 2,
          screen1Y: 0,
          overlayOpacity1: 0 // 隐藏第一屏蒙层
        }, () => {
          this.updateStyles();
          setTimeout(() => {
            this.setData({ 
              animating: false,
              overlayOpacity1: 0,
              overlayOpacity2: 0
            }, () => this.updateStyles());
          }, 320);
        });
      }
    } else if (this.data.current === 2 && delta > 0 && this.data.scrollTop <= 0) {
      if (delta > threshold) {
        // 返回第一屏（第一屏从顶部覆盖）
        this.setData({
          animating: true,
          screen1Z: 3,
          screen2Z: 2,
          screen1Y: 0,
          screen2Y: 0,
          overlayOpacity2: 0.5 // 设置第二屏固定蒙层透明度
        }, () => {
          this.updateStyles();
          setTimeout(() => {
            this.setData({
              current: 1,
              animating: false,
              screen1Y: 0,
              screen2Y: h,
              screen1Z: 2,
              screen2Z: 3,
              overlayOpacity2: 0 // 动画结束后隐藏第二屏蒙层
            }, () => this.updateStyles());
          }, 320);
        });
      } else {
        // 回退到第二屏（第一屏退回到顶部外）
        this.setData({
          animating: true,
          screen1Y: -h,
          screen1Z: 3,
          screen2Z: 2,
          screen2Y: 0,
          overlayOpacity2: 0 // 隐藏第二屏蒙层
        }, () => {
          this.updateStyles();
          setTimeout(() => {
            this.setData({ 
              animating: false,
              overlayOpacity1: 0,
              overlayOpacity2: 0
            }, () => this.updateStyles());
          }, 320);
        });
      }
    } else {
      // 方向不匹配或无移动
      this.setData({ 
        animating: false,
        overlayOpacity1: 0,
        overlayOpacity2: 0
      }, () => this.updateStyles());
    }
  },
  
  // 滚动事件处理函数
  onScroll(e) {
    // 记录scroll-view的滚动位置
    this.setData({
      scrollTop: e.detail.scrollTop
    });
  },

    // scroll-view的触摸开始事件
    onScrollTouchStart(e) {
      // 当scrollTop为0时，禁止scroll-view事件冒泡，让父级触摸方法触发
      if (this.data.current === 2 && this.data.scrollTop === 0) {
        // 不阻止冒泡，让父级处理
        return;
      }
      // 只在第二屏且不在顶部时阻止事件冒泡
      if (this.data.current === 2 && this.data.scrollTop > 0) {
        if (e.stopPropagation && typeof e.stopPropagation === 'function') {
          e.stopPropagation();
        }
      }
    },
  
    // scroll-view的触摸移动事件
    onScrollTouchMove(e) {
      // 当scrollTop为0时，禁止scroll-view事件冒泡，让父级触摸方法触发
      if (this.data.current === 2 && this.data.scrollTop === 0) {
        // 不阻止冒泡，让父级处理
        return;
      }
      // 只在第二屏且不在顶部时阻止事件冒泡
      if (this.data.current === 2 && this.data.scrollTop > 0) {
        if (e.stopPropagation && typeof e.stopPropagation === 'function') {
          e.stopPropagation();
        }
      }
    },
  
    // scroll-view的触摸结束事件
    onScrollTouchEnd(e) {
      // 当scrollTop为0时，禁止scroll-view事件冒泡，让父级触摸方法触发
      if (this.data.current === 2 && this.data.scrollTop === 0) {
        // 不阻止冒泡，让父级处理
        return;
      }
      // 只在第二屏且不在顶部时阻止事件冒泡
      if (this.data.current === 2 && this.data.scrollTop > 0) {
        if (e.stopPropagation && typeof e.stopPropagation === 'function') {
          e.stopPropagation();
        }
      }
    },
      // 向下箭头点击事件处理
  onDownArrowTap(e) {
    // 只有在第一屏时才处理点击事件
    if (this.data.current !== 1 || this.data.animating) {
      return;
    }

    const h = this.data.windowHeight;
    
    // 直接切换到第二屏，使用与触摸事件相同的动画逻辑
    this.setData({
      animating: true,
      screen2Z: 3,
      screen1Z: 2,
      screen2Y: 0,
      screen1Y: 0,
      overlayOpacity1: 0.5 // 设置第一屏固定蒙层透明度
    }, () => {
      this.updateStyles();
      setTimeout(() => {
        // 切换到第二屏，并将第一屏准备到顶部外（用于往下覆盖）
        this.setData({
          current: 2,
          animating: false,
          screen1Y: -h,
          screen2Y: 0,
          screen1Z: 2,
          screen2Z: 3,
          overlayOpacity1: 0 // 动画结束后隐藏第一屏蒙层
        }, () => this.updateStyles());
      }, 320);
    });
  }
})